<template>
  <lay-tab :value="value" v-bind="mergeConfig" @change="handleChange">
    <lay-tab-item v-for="item in list" :key="item.id" :title="item.label" :id="item.id">
      <slot></slot>
    </lay-tab-item>
  </lay-tab>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue'
const props = defineProps({
  value: {
    type: [String, Number]
  },
  config: {
    type: Object,
    default() {
      return {}
    }
  },
  list: {
    type: Array,
    default() {
      return [
        // {
        //   label: '选项一',
        //   id: '1'
        // },
        // {
        //   label: '选项二',
        //   id: '2'
        // }
      ]
    }
  }
})
const emit = defineEmits(['input','change'])
const defaultConfig = {
  type: 'card',
  tabPosition: 'top'
}
const mergeConfig = computed(() => {
  return Object.assign(defaultConfig, props.config)
})

function handleChange(e){
  emit('input', e)
  emit('change', e)
}
</script>

<style></style>
